<template>
  <div class="rec-box">
    <div class="collection-header">
      <router-link to="/recipes" tag="i" class="iconfont icon-fanhui"></router-link>
      <h2>我的收藏</h2>
    </div>
    <div class="collection-content">
      <div class="center">
        您收藏的食谱在这里
      </div>
    </div>
  </div>
</template>

<style lang="scss">
@import '@/lib/reset.scss';
.collection-header {
  @include rect(100%, 0.42rem);
  background: rgba(248, 196, 174, 0.849);
  line-height: 0.42rem;
  i {
    float: left;
    font-size: 0.16rem;
    width: 0.3rem;
    text-align: center;
    font-weight: 700
  }
  h2 {
    float: left;
    width:80%;
    text-align: center;
    font-size: 0.16rem;
    font-weight: 500;
    color: #6e5757;
  }
}
.collection-content {
  @include rect(100%, 100%);
  overflow: auto;
  .center {
  @include rect(100%, 0.3rem);
  margin: 0 auto;
  background: #e7e7e7;
  text-align: center;
  line-height: 0.3rem;
  font-size: 0.14rem;
  color: #333333;
  margin-top: 0.06rem;
  }
}
</style>
